import { Grid } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { getTodoList } from '@/libs/list.js'
import { UserContactOutline } from 'antd-mobile-icons'
function Page() {
	const navigate = useNavigate()
	const list = getTodoList().filter(item => !item.unShow)
	const onClick = line => {
		const { key } = line
		navigate(key)
	}
	return (
		<div style={{ padding: '10px' }}>
			<Grid columns={4} gap={8}>
				{list.map((l, i) => (
					<Grid.Item key={i} onClick={e => onClick(l)}>
						<div
							style={{
								display: ' flex',
								flexDirection: 'column',
								alignItems: 'center',
								justifyContent: 'center'
							}}
						>
							<UserContactOutline style={{ fontSize: '26px' }} />
							<span>{l['title']}</span>
						</div>
					</Grid.Item>
				))}
			</Grid>
		</div>
	)
}

export default Page
